<template>
  <div class="carousel-wrappers">
    <el-carousel height="500px" arrow="always" indicator-position="outside">
      <el-carousel-item v-for="(img, index) in images" :key="index">
        <img :src="img" class="carousel-image" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: "Lunbo",
  data() {
    return {
      images: [
        require("@/assets/images/img1.jpeg"),
        require("@/assets/images/img2.jpeg"),
        require("@/assets/images/img3.jpeg"),
      ],
    };
  },
};
</script>

<style scoped>
.carousel-wrappers {
  width: 1400px;
  margin: 0 auto;
  height: 500px;
  position: relative;
}

.carousel-image {
  width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
}
</style>
